<!--库存数据页面-->
<template>
  <div class="app-container">
    <el-card style="width: 60%">
      <el-table :data="stockData">
        <el-table-column prop="name" label="产品类型"></el-table-column>
        <el-table-column prop="value" label="数量">
          <template #default="{ row }"> {{ row.value }}kg </template>
        </el-table-column>
        <el-table-column prop="per" label="占比">
          <template #default="{ row }"> {{ row.per }}% </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--库存信息-->

    <!--列表-->

    <!--分页-->
  </div>
</template>

<script>
import {
  querySearchFishpondName,
  getUserList,
  getFishTypeList,
} from "@/api/common";
import { getQueryStockNew } from "@/api/inventoryData";

export default {
  name: "InventoryData",
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: 10,
      form: {
        fishSpecies: "", // 产品类型（鱼品类型）
        qcName: "", // 质检员
        inName: "", // 入库仓管（操作人）
        fishpondName: "", // 鱼塘名称
        inTime: null, // 入库时间
        productionDate: null, // 生产日期
        expirationDate: null, // 过期日期
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      loading: false,
      tableData: [],
      sysUsers: [],
      fishpond: [],
      sysFishs: [],
      stockData: [],
    };
  },
  created() {
    this.querySearchFishpondNameFun();
    this.getUserListFun();
    this.getFishTypeListFun();
    this.onQuery();
  },
  methods: {
    // 分页
    handleSizeChange: function (val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.getTableData();
    },
    handleCurrentChange: function (val) {
      this.currentPage = val;
      this.getTableData();
    },
    // 接口-鱼塘下拉
    querySearchFishpondNameFun() {
      querySearchFishpondName({}).then((res) => {
        this.fishpond = res.resultData;
      });
    },
    // 接口-用户下拉
    getUserListFun() {
      getUserList({}).then((res) => {
        this.sysUsers = res.resultData;
      });
    },
    // 接口-鱼品下拉
    getFishTypeListFun() {
      getFishTypeList({}).then((res) => {
        this.sysFishs = res.resultData;
      });
    },
    // 获取鱼品类型
    querySearchPurchaseNo: function (queryString, cb) {
      const r = this.sysFishs;
      var rs = queryString ? r.filter(this.createFilter(queryString)) : r;
      cb(rs);
    },
    handleSelectPurchaseNo(item) {
      this.form.fishSpecies = item.name;
    },
    clickClearfishSpecies() {
      this.$nextTick(() => {
        if (this.$refs.fishSpeciesRef) {
          this.$refs.fishSpeciesRef.activated = true;
        }
      });
    },
    clickClearqcName() {
      this.$nextTick(() => {
        if (this.$refs.qcNameRef) {
          this.$refs.qcNameRef.activated = true;
        }
      });
    },
    clickClearinName() {
      this.$nextTick(() => {
        if (this.$refs.inNameRef) {
          this.$refs.inNameRef.activated = true;
        }
      });
    },
    clickClearfishpondName() {
      this.$nextTick(() => {
        if (this.$refs.fishpondNameRef) {
          this.$refs.fishpondNameRef.activated = true;
        }
      });
    },
    // 获取用户信息
    querySysUser: function (queryString, cb) {
      const r = this.sysUsers;
      var rs = queryString
        ? r.filter(this.createFilterUserName(queryString))
        : r;
      cb(rs);
    },
    handleSelectSysUser(item) {
      this.form.qcName = item.name;
    },
    // 入库仓管(同用户信息)
    handleSelectInName(item) {
      this.form.inName = item.name;
      // this.form.inNameId = item.id
    },
    // 鱼塘下拉
    querySearchFishpondName: function (queryString, cb) {
      const r = this.fishpond;
      var rs = queryString ? r.filter(this.createFilter(queryString)) : r;
      cb(rs);
    },
    handleSelectFishpondName(item) {
      this.form.fishpondName = item.name;
    },

    // 模糊建议公共方法
    createFilter(queryString) {
      return (rr) => {
        return rr.name.toLowerCase().indexOf(queryString.toLowerCase()) != -1;
      };
    },
    createFilterUserName(queryString) {
      return (rr) => {
        return (
          rr.userName.toLowerCase().indexOf(queryString.toLowerCase()) != -1
        );
      };
    },
    // 查询
    onQuery() {
      console.log("查询", this.form);
      this.currentPage = 1;
      this.getTableData();
    },
    // 查询库存列表数据
    getTableData() {
      const { inTime, productionDate, expirationDate } = this.form;
      if (inTime && inTime.length > 0) {
        this.$set(this.form, "inTimeStart", inTime[0]);
        this.$set(this.form, "inTimeEnd", inTime[1]);
      } else {
        this.$set(this.form, "inTimeStart", "");
        this.$set(this.form, "inTimeEnd", "");
      }
      if (productionDate && productionDate.length > 0) {
        this.$set(this.form, "productionDateStartTime", productionDate[0]);
        this.$set(this.form, "productionDateEndTime", productionDate[1]);
      } else {
        this.$set(this.form, "productionDateStartTime", "");
        this.$set(this.form, "productionDateEndTime", "");
      }
      if (expirationDate && expirationDate.length > 0) {
        this.$set(this.form, "expirationDateStartTime", expirationDate[0]);
        this.$set(this.form, "expirationDateEndTime", expirationDate[1]);
      } else {
        this.$set(this.form, "expirationDateStartTime", "");
        this.$set(this.form, "expirationDateEndTime", "");
      }
      const params = {
        page: this.currentPage,
        rows: this.pageSize,
        ...this.form,
      };
      getQueryStockNew(params).then((res) => {
        const {
          resultData: { list, stock },
        } = res;
        this.tableData = list.resultData;
        const stockAllNum = stock.find((el) => el.name == "总库存数量").value;
        stock.forEach((element) => {
          element["per"] =
            stockAllNum != 0
              ? ((element.value / stockAllNum) * 100).toFixed(2)
              : 0;
        });
        this.stockData = stock;
        this.total = list.total;
      });
    },
    // 搜索重置
    resetFormSearch(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
        this.$refs[formName].clearValidate();
        this.currentPage = 1;
        this.onQuery();
      });
    },
    // 重置
    resetForm(formName) {
      this.$nextTick(() => {
        this.$refs[formName].resetFields();
        this.$refs[formName].clearValidate();
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.line {
  text-align: center;
}
.grid-content {
  margin-top: 20px;
  border-radius: 4px;
  text-align: center;
  min-height: 36px;
  line-height: 36px;
}
.bg-purple {
  background: #e5e9f2;
}
</style>
